<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>${appname}</title>
<%@ include file="/WEB-INF/view/common/css_js_base.jsp"%>
<script>
$(function(){
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div class="container">

	<h1>defalut list-group</h1>
	<ul class="list-group">
	  <li class="list-group-item">Cras justo odio</li>
	  <li class="list-group-item">Dapibus ac facilisis in</li>
	  <li class="list-group-item">Morbi leo risus</li>
	  <li class="list-group-item">Porta ac consectetur ac</li>
	  <li class="list-group-item">Vestibulum at eros</li>
	</ul>
	
	<hr/>
	<h1>Badges</h1>
	Add the badges component to any list group item and it will automatically be positioned on the right.
	<ul class="list-group">
	  <li class="list-group-item">
	    <span class="badge">14</span>
	    Cras justo odio
	  </li>
	</ul>
	
	<hr/>
	<h1>Linked items</h1>
	<div class="list-group">
	  <a href="#" class="list-group-item active">
	    Cras justo odio
	  </a>
	  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
	  <a href="#" class="list-group-item">Morbi leo risus</a>
	  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
	  <a href="#" class="list-group-item">Vestibulum at eros</a>
	</div>
	
	<hr/>
	<h1>Contextual classes</h1>
	Use contextual classes to style list items, default or linked. Also includes .active state.
	<ul class="list-group">
	  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
	  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
	  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
	  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
	</ul>
	<div class="list-group">
	  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
	  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
	  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
	  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
	</div>
	
	
	<hr/>
	<h3 id="list-group-custom-content">Custom content</h3>
	<div class="list-group">
      <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
      </a>
      <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
      </a>
      <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
      </a>
    </div>

</div>
</body>
</html>
